import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import { projectLabelView as projectDuck } from 'ducks'
import Group from './group'
import Block from './block'
import Label from './label'
import Item from './item'

const TypeView = ({
  lableState, link, match, actionNavItem,
}) => {
  const urls = match.url.split('/')
  return (
    <Group title="任务导航">
      <Block>
        <Item action={() => actionNavItem(match.url, lableState, 'pre')}>
          <img className="label-img32" src="https://img.icons8.com/color/2x/previous.png" alt="" />
          <br />
          <Label title="上一个" />
        </Item>
        <Item action={() => actionNavItem(match.url, lableState, 'next')}>
          <img className="label-img32" src="https://img.icons8.com/color/2x/next.png" alt="" />
          <br />
          <Label title="下一个" />
        </Item>
        <Item action={() => actionNavItem(match.url, lableState, 'first')}>
          <img
            className="label-img32"
            src="https://img.icons8.com/ultraviolet/2x/first.png"
            alt=""
          />
          <br />
          <Label title="第一个" />
        </Item>
        <Item action={() => actionNavItem(match.url, lableState, 'last')}>
          <img
            className="label-img32"
            src="https://img.icons8.com/ultraviolet/2x/last.png"
            alt=""
          />
          <br />
          <Label title="最后" />
        </Item>
      </Block>
    </Group>
  )
}

const mapDispatchToProps = {
  actionNavItem: projectDuck.creators.actionNavItem,
}

export default withRouter(
  connect(
    null,
    mapDispatchToProps,
  )(TypeView),
)
